  <template>
  <!-- 发票信息 新增 ｜ 编辑 -->
  <el-dialog :title="data.id?'发票编辑':'发票新增'" :visible.sync="dialogVisible" :close-on-click-modal="closeModal" :close-on-press-escape="closeEscape" :before-close="close" class="invoice-info-dialog">
    <div class="invoice-info-wrapper">
      <!-- form 表单-->
      <el-form :model="invoiceForm" :rules="rules" ref="invoiceForm" label-width="130px">
          <el-form-item v-if="data.id" label="发票抬头:" prop="">
            <el-select v-model="invoiceForm.sellerName" disabled style="width:100%">
            </el-select>
          </el-form-item>
          <el-form-item v-else label="发票抬头:" prop="sellerValue">
            <el-select v-model="invoiceForm.sellerValue" placeholder="请选择发票抬头" style="width:100%">
              <el-option v-for="(item,index) in invoiceTitleOptions" :key="index" :label="item.sellerName" :value="item.sellerValue"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="纳税人识别号:" prop="sellerTaxNo">
            <el-input type="text" v-model="invoiceForm.sellerTaxNo" maxlength="20" placeholder="请输入纳税人识别号" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="地址、电话:" prop="sellerAddressPhone">
            <el-input type="textarea" v-model="invoiceForm.sellerAddressPhone" placeholder="请输入地址、电话" maxlength="140" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="开户行、账号:" prop="sellerBankAccount">
            <el-input type="textarea" v-model="invoiceForm.sellerBankAccount" placeholder="请输入开户行、账号" maxlength="140" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="是否设置为默认:">
            <el-checkbox v-model="invoiceForm.isDefault">默认</el-checkbox>
          </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="close">取 消</el-button>
      <el-button v-if="data.id" type="primary" size="mini" :loading="submitLoading" @click="submit('update')">保 存</el-button>
      <el-button v-else type="primary" size="mini" :loading="submitLoading" @click="submit('add')">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import dialog from '@mix/dialog'
import { getInvoiceTitleApi, addInvoiceInfoApi, updateInvoiceInfoApi } from '@/api/finance'
import validate from '@/utils/validate'

export default {
  mixins: [dialog],
  props:{
    data:{
      type: Object,
      default: ()=> ( {} )
    }
  },
  data(){
    return {
      invoiceForm: {},
      rules:{
        sellerValue: [
            { required: true, message: '请输入发票抬头', trigger: 'blur' }
        ],
        sellerTaxNo: [
            { required: true, message: '请输入纳税人识别号', trigger: 'blur' },
            { min:15, max:20, message:'请输入15-20位字符', trigger: 'blur' },
            { validator: validate.validateSellerTaxNo, trigger: 'blur' },
        ],
        sellerAddressPhone: [
            { required: true, message: '请输入地址、电话', trigger: 'blur' }
        ],
        sellerBankAccount: [
            { required: true, message: '请输入开户行、账号', trigger: 'blur' }
        ],
      },
      invoiceInfo: {},
      invoiceTitleOptions: [],
      submitLoading: false 
    }
  },
  created(){
    this.initPage()
    if(this.data.id){
      this.invoiceForm = this.data
    }
  },
  methods:{
    initPage () {
      this.getInvoiceTitle()
    },
    //获取发票抬头
    async getInvoiceTitle(){
      try{
        const { code, result = [] }= await getInvoiceTitleApi()
        if(code !== 200) return
        this.invoiceTitleOptions = result
        if(result.length && !this.data.id){
          this.$set(this.invoiceForm,'sellerValue',result[0].sellerValue)
        }
      }catch(err){
        console.log(err)
      }
    },
    //提交保存
    submit(flag = 'add'){
      this.$refs['invoiceForm'].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          const data = {
            ...this.invoiceForm
          }
          data.type = this.invoiceForm.isDefault ? 0 : 1
          if(flag === 'add'){
            this.addInfo(data)
          }else{
            this.updateInfo(data)
          }
        } 
      }) 
    },
    async addInfo(data){
      const { code, message } = await addInvoiceInfoApi(data)
      this.messageTip('add',code, message) 
    },
    async updateInfo(data){
      const { code, message } = await updateInvoiceInfoApi(data)
      this.messageTip('update',code, message)
    },
    messageTip(flag = 'add',code){
      //错误提示，全局显示
      if(code === 200){
        this.$message.success(flag === 'update' ? '修改成功' : '添加成功')
        this.submitLoading = false
        this.$emit('close')
      }else{
        this.submitLoading = false
      }
    },
  }
}
</script>
<style lang="less" scoped>
.invoice-info-wrapper{
  padding: 0 20px;
  .el-form-item {
    margin-bottom: 18px;
  }
}
</style> 